<template>
  <div class="tagPage">
    <el-tag v-for="(item, index) in tags" :key="item.name" v-on:click.native="pushPath(item)"
      v-on:close="removePath(item, index)" class="tag" :closable="Boolean(index)">
      {{ item.label }}
    </el-tag>
  </div>
</template>
<script>

import { mapState } from "vuex";
export default {
  name: "myTag",
  data() {
    return {

    }
  },
  methods: {
    // 跳转页面
    pushPath(item) {
      if (this.$route.path !== item.path && !(this.$route.path === "/home" && (item.path === "/"))) {
        this.$router.push({ name: item.name })
        // 跳转路由时候给面包屑添加数据            
      }
    },
    // 删除标签删除数据
    removePath(item, index) {
      // 需要判断不同环境
      // 配置关闭功能
      // this.dynamicTags.splice(this.dynamicTags.indexOf(item), 1);
      // 调用vuex修改数据
      this.$store.commit("REMAVELIST", item);
      const leatch = this.tags.length;
      //只要被删除页不是在显示状态直接退出函数
      if (item.name !== this.$route.name) {
        return;
      }
      // 在后面
      if (index == leatch) {
        this.$router.push({ name: this.tags[index - 1].name })
      } else {
        // 在中间
        this.$router.push({ name: this.tags[index].name })
      }
      // 在当前页面
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabList
    })
  },
}
</script>

<style lang="scss" scpoed>
@import '@/assets/theme/handle.scss';

.tagPage {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.tagPage .el-tag {
  margin-left: 10px;
}

.tag:last-of-type {
  background-color: #389AFD;
  color: white;
  border: 0;
}
</style>